<template>
	<view class="card-content flex-col">
		<div class="header flex color-FFFFFF fs-32">

			我的次数
			<view class="flex justify-end flex-1 fs-24 align-end underline" @click.stop="checkIOS()&&checkLogin()&&Go('/subpages/recharge/recharge')">
				开通会员专享权益
			</view>
		</div>
		<div class="body flex">
			<div class="flex-center flex-col flex-1" v-for="(usetop,i) in data" :style="{flex:i==0?1.1:1}">
				<view class="fs-40" :style="{color:usetop.numcolor}">
					{{usetop.num}}
				</view>
				<view class="fs-26 color-989898 m-t-25">
					{{usetop.title}}
				</view>
				<view class="fs-24 color-B3B3B3 m-t-15 desc">
					{{usetop.desc&&('专享'+usetop.desc + '到期')}}
				</view>
			</div>
		</div>
		<view style="position: relative;">
			<by-nike-avtar ref="login" ></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default(){
					return [{
					num: 129,
					numcolor: '#609AF2',
					title: '我的次数',
					desc: '2023-05-01到期'
				}, {
					num: 50,
					numcolor: '#F7904C',
					title: '今日次数',
					desc: ''
				}, {
					num: 20,
					numcolor: '#28C764',
					title: '今日获得',
					desc: ''
				}]
				}
			},
		},
		data() {
			return {
				osName:''
			}
		},
		mounted() {
			let SystemInfo = uni.getSystemInfoSync();
		},
		methods: {
			checkIOS(){
				
				let SystemInfo = uni.getSystemInfoSync();
				if(SystemInfo.osName == 'ios'){
					uni.showToast({
						title:'由于相关规范，iOS功能暂不可用',
						icon:'none'
					})
					return false;
				}
				return true;
			}
		}
	}
</script>

<style scoped>
	.card-content {
		width: 690upx;
		min-height: 260upx;
		background: #609AF2;
		border-radius: 20upx;
		margin: 30upx auto 0;
		padding-bottom: 10upx;
	}

	.card-content .header {
		padding: 26upx 25upx 24upx 29upx;
		box-sizing: border-box;
	}

	.card-content .body {
		width: 670upx;
		min-height: 170upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin: 0 auto;
	}
	
	.card-content .body .desc{
		height: 24upx;
	}

	/* ------------ */

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.align-end {
		align-items: flex-end;
	}

	.underline {

		text-decoration: underline;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.gap-30 {
		gap: 30upx;
	}

	.m-t-25 {
		margin-top: 25upx;
	}

	.m-t-15 {
		margin-top: 15upx;
	}

	.fs-24 {
		font-size: 24upx;
		line-height: 24upx;
	}

	.fs-26 {
		font-size: 26upx;
		line-height: 26upx;
	}

	.fs-40 {
		font-size: 40upx;
		line-height: 40upx;
	}

	.fs-32 {
		font-size: 32upx;
	}

	.color-989898 {
		color: #989898;
	}

	.color-FFFFFF {
		color: #FFFFFF;
	}

	.color-B3B3B3 {
		color: #B3B3B3;
	}
</style>